<template>
  <div class="app-container">
    <vxe-form :data="formData" @submit="onSearchBtnClick" @reset="onSearchBtnClick">
      <vxe-form-item field="username" :item-render="{name: 'input', attrs: {placeholder: '请输入用户名称'}}" />
      <vxe-form-item field="logType" :item-render="{name: 'select',options:dicType, attrs: {placeholder: '请选择日志类型'}}" />
      <vxe-form-item :item-render="{ name: '$buttons', children: [{ props: { type: 'submit', content: 'common.select', status: 'success' } }, { props: { type: 'reset', content: 'common.reset',status: 'info' } }] }" />
    </vxe-form>
    <vxe-toolbar custom>
      <template v-slot:buttons>
        <vxe-button
          v-auth="['admin', 'log:delete']"
          size="medium"
          icon="el-icon-delete"
          status="danger"
          :disabled="!multipleSelection.length"
          @click="onDeleteBtnClick"
        >删除</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border="inner"
      size="mini"
      :data="tableData"
      :expand-config="{labelField: 'logType'}"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-table-column
        type="checkbox"
        width="50"
      />
      <vxe-table-column
        field="logType"
        type="expand"
        title="类型"
      >
        <template v-slot:content="{ row }">
          <ul>
            <li>
              <span>方法: </span>
              <span>{{ row.method }}</span>
            </li>
            <li>
              <span>参数 </span>
              <span>{{ row.params }}</span>
            </li>
            <li>
              <span>信息:  </span>
              <span>{{ row.exceptionDetail }}</span>
            </li>
          </ul>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="description"
        title="描述"
      />
      <vxe-table-column
        field="requestIp"
        title="IP"
      />
      <vxe-table-column
        field="time"
        title="响应时间"
      />
      <vxe-table-column
        field="username"
        title="操作人"
      />
      <vxe-table-column
        field="browser"
        title="浏览器"
      />
      <vxe-table-column
        field="createTime"
        title="操作时间"
      />
    </vxe-table>
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100, 200]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import { logs, del } from '@/api/log'
import { getDic } from '@/utils/auth'
export default {
  data() {
    return {
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 20
      },
      tableData: [],
      tableDetailData: [],
      multipleSelection: [],
      multipleDetailSelection: [],
      detail: null,
      details: null,
      total: 0,
      data: []
    }
  },
  created() {
    this.dicType = getDic('logType')
    this.onSearchBtnClick()
  },
  methods: {
    selectAllEvent({ checked, records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ checked, records }) {
      this.multipleSelection = records
    },
    onSearchBtnClick() {
      this.loading = false
      logs(this.formData).then((data) => {
        this.tableData = data.list
        this.total = data.total
        this.loading = false
      })
    },
    formatTime({ cellValue, row, column }) {
      return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
    },
    onDeleteBtnClick() {
      this.$confirm('确定驱逐该用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.delData())
    },
    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    },
    async delData() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      await del(selectRecords.map(item => item.id))
      this.$notify({
        type: 'success',
        message: '删除成功!'
      })
      this.onSearchBtnClick()
    }
  }
}
</script>
